import React from "react";
import { Table, Switch, message } from 'antd';
import { timeToStr } from '../../../../../utils/time'
import api from "../../../../../api";


const MessageTable = (props: any) => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'number',
            key: 'number',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'tel',
            key: 'tel',
        },
        {
            title: '公司',
            dataIndex: 'company',
            key: 'company',
        },
        {
            title: '新房',
            dataIndex: 'newHouse',
            key: 'newHouse',
        },
        {
            title: '二手房',
            dataIndex: 'secondHouse',
            key: 'secondHouse',
        },
        {
            title: '租房',
            dataIndex: 'rentHouse',
            key: 'rentHouse',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            render: (state: any, item: any) => {
                return state ? <span>在职</span> : <span>离职</span>
            }
        },
        {
            title: '操作',
            key: "option",
            render: (text: any, item: any) => {
                return <div className="option-message">
                    <span onClick={() => { edit(item) }}>编辑</span>
                    <span onClick={() => { del(item.id) }}>删除</span>
                    <span onClick={() => { brokerChange(item.id,1) }}>启用</span>
                    <span onClick={() => { brokerChange(item.id,0) }}>禁用</span>
                </div>
            }
        },
    ];
    // 方法
    // 点击删除
    const del = (id: string) => {
        // 把id传递给父组件的删除方法
        props.delBroker(id)
    }
    // 点击编辑
    const edit = (item: any) => {
        props.editMessage(item)
    };
    // 点击启用或者禁用
    const brokerChange = (id:number,num:number) => {
        api.brokerChange({
            id,
            state:num
        }).then((res:any)=>{
            if(res.success) {
                message.success('修改成功');
                // 重新渲染页面
                props.getBrokerList();        
              } else {
                message.error(res.message);
              }
        })
    }
    return (
        <>
            {props.dataSource[0] && <Table dataSource={props.dataSource} columns={columns} rowKey={record => record.id}
                pagination={false}
            />}
        </>

    )
};

export default MessageTable